<template>
    <view class="comment-container">
        <view class="comment-content">
            <view class="comment-header">
                <text class="title">请您对于雇主发出评价</text>
            </view>

            <view class="employer-info">
                <image class="avatar" :src="order.employer_avatar" mode="aspectFill"></image>
                <view class="info">
                    <text class="name">{{ order.employer_name }}</text>
                    <text class="tag">雇主</text>
                </view>
            </view>

            <view class="rating-section">
                <text class="rating-label">评星评论</text>
                <view class="stars">
                    <image v-for="i in 5" :key="i" class="star" @click="selectStar(i)"
                        :src="selectedStars >= i ? '/static/image/xxz.png' : '/static/image/xx.png'"></image>
                </view>
                <!-- 根据星星数量显示评价等级 -->
                <text class="rating-text" v-if="selectedStars === 0">差评</text>
                <text class="rating-text" v-else-if="selectedStars <= 1">差评</text>
                <text class="rating-text" v-else-if="selectedStars === 2">中评</text>
                <text class="rating-text" v-else>好评</text>
            </view>

            <view class="comment-input-section">
                <textarea class="comment-input" placeholder="您的反馈将会让平台的管理做的更好~" v-model="commentContent"></textarea>
            </view>
        </view>
        <view class="submit-btn-container">
            <button class="submit-btn" :disabled="!canSubmit" @click="submitComment">
                评论发布
            </button>
        </view>
    </view>
</template>

<script>
import { request } from '../../../utils/request.js';

export default {
    data() {
        return {
            selectedStars: 0,
            commentContent: '',
            order: {
                id: '',
                employer_avatar: '',
                employer_name: ''
            }
        };
    },
    onLoad(options) {
        console.log('评论页面参数:', options);
        this.order.id = options.order_id;
        // 对头像URL和名字进行解码，确保特殊字符能正确显示
        this.order.employer_avatar = decodeURIComponent(options.employer_avatar || '/static/image/logo.jpg');
        this.order.employer_name = decodeURIComponent(options.employer_name || '未知用户');
    },
    computed: {
        canSubmit() {
            return this.commentContent.trim().length > 0;
        }
    },
    methods: {
        selectStar(count) {
            this.selectedStars = count;
        },
        submitComment() {
            // 提交评论的逻辑
            request({
                url: `/Workerorders/comment`,
                method: 'POST',
                data: {
                    order_id: this.order.id,
                    stars: this.selectedStars,
                    content: this.commentContent
                }
            }).then(res => {
                if (res.code === 200) {
                    uni.showToast({
                        title: '评论提交成功',
                        icon: 'success'
                    });
                    // 可以添加导航返回逻辑
                    uni.navigateBack();
                }else{
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                }
            });
        }
    }
};
</script>

<style scoped>
.comment-container {
    background-color: #f5f5f5;
    min-height: 100vh;
}

.comment-content {
    padding: 20rpx;
    background-color: white;
    border-radius: 35rpx;
    margin: 20rpx;
    margin-top: 50rpx;
}

.comment-header {
    margin-bottom: 30rpx;
}

.title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.employer-info {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
}

.avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
}

.info {
    flex: 1;
}

.name {
    font-size: 28rpx;
    color: #333;
    margin-right: 10rpx;
}

.tag {
    font-size: 22rpx;
    background: #FFF3EB;
    color: #F76F17;
    padding: 2rpx 10rpx;
    border-radius: 10rpx;
}

.rating-section {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 0 20rpx;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10rpx;
}

.rating-label {
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
}

.stars {
    display: flex;
    margin-right: 20rpx;
}

.star {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
    color: #ccc;
    background-repeat: no-repeat;
    /* 防止图片重复 */
    background-position: center;
    /* 居中显示 */
    background-size: cover;
    /* 覆盖容器且保持比例 */
}

.star.active {
    color: #ffcc00;
}

.unrated-tip {
    font-size: 26rpx;
    color: #999;
}

.comment-input-section {
    margin-bottom: 40rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
}

.comment-input {
    width: 100%;
    height: 200rpx;
    font-size: 26rpx;
    color: #333;
    border: 1rpx solid #eee;
    border-radius: 10rpx;
    padding: 15rpx;
    box-sizing: border-box;
}

.submit-btn-container {
    width: 100%;
    height: 150rpx;
    background-color: white;
    color: #fff;
    font-size: 30rpx;
    border-radius: 10rpx;
    position: fixed;
    bottom: 0;
}

.submit-btn {
    width: calc(100% - 40rpx);
    height: 90rpx;
    background: #BEFF33;
    color: #0E1C37;
    font-size: 30rpx;
    border-radius: 10rpx;
    margin: 0 auto 20rpx;
    position: fixed;
    bottom: 20rpx;
    left: 20rpx;
}

.submit-btn:disabled {
    background-color: #ccc;
}
</style>